<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align
		     功能：1.应用于表格中单元格【栅格布局】
			      2.行内元素与行内块元素对齐方式
				     理解：文本和图片对齐方式【垂直居中】
					 元素种类：
					 行内元素：典型行内元素 span、a、文本
					 特点：在一行内显示、不可设置宽高
					 块级元素：典型块级元素 div、p
					 特点：独占一行、可设宽高
					 行内块元素：典型行内块元素  img
					 特点：在一行内显示、可设宽高
					 页面组成：元素之间嵌套生成
					 三种元素相互嵌套  √  嵌套根据元素特点页面混乱
					 嵌套条件1：在一行内显示【效果】
					           块套行  √   推荐
							   行套行  √
							   行套块  √   增加条件，块添加宽高，造成页面布局混乱 ×
							   块套块  √
					 嵌套条件2：独占一行【效果】
					           块套行  √   推荐
					           行套行  ×
					           行套块  ×   混乱
					           块套块  √
		 -->
		 <style>
			 /* 抓每个img  
			  派生（后代）选择器：
			  特点：抓取父元素中所有(后代)子元素【元素嵌套特点】
			  伪类选择器：
			  特点：在选择器后，过滤符合特定条件某个元素
			  nth-child:选中父元素中第N个
			  符合条件：p中包含4个img
			  id抓取父元素：空间大
			  class抓取父元素中某个子元素：微调
			  */
			  im g:nth-child(1){
				 border: 10px solid red;
			 }
			 /* 抓取标准每个img方案 */
			 p img.baseline{
				 vertical-align: baseline;
			 }
			 p img.top{
				 vertical-align: top;
			 }
			 p img.middle{
				 vertical-align: middle;
				 /* vertical-align与text-align区别
				  区别1：属性值不同
				      2：vertical-align操作文本和图片垂直
					     text-align操作文本左右和居中以及两边对齐
				  */
			 }
			 p img.bottom{
				 vertical-align: bottom;
			 }
		 </style>
	</head>
	<body>
		<h1>垂直方向属性使用【针对元素种类】</h1>
		<p>哪吒1<img class="baseline" src="img/img1.png" alt="哪吒1" width="100px" height="100px"/>基线对齐</p>
		<p>哪吒2<img class="top" src="img/img2.png" alt="哪吒2" width="100px" height="100px"/>顶部对齐</p>
		<p>太乙<img class="middle" src="img/img3.png" alt="太乙" width="100px" height="100px"/>中间对齐</p>
		<p>哪吒3<img class="bottom" src="img/img4.png" alt="哪吒3" width="100px" height="100px"/>底部对齐</p>
		<!-- 需求：垂直方向属性 4个属性值
		          如果，不改变现有html结构，可以找到依次4个img
				  抓每个---4个图片
		     思路：派生选择器+伪类选择器
			      p img
		 -->
	</body>
</html>